<template>
    <div class="marketing_group_detail_group">
        <!-- 3已失效 4已过期 5未启用 6已启用 -->
        <el-button
            type="primary"
            v-auth="'coupon_list:edit'"
            v-if="[5, 6].includes(form.couponStatus)"
            class="edit_group_btn"
            @click="editHandler"
            >编辑</el-button
        >
        <el-descriptions :column="1" class="custom-el-desc">
            <template #title><h1>基础设置</h1></template>
            <el-descriptions-item
                v-for="{ label, prop } in commonList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <template
                    v-if="
                        ['couponMatchText', 'couponDiscountContent', 'couponPrerequisites', 'couponTimeType'].includes(
                            prop
                        )
                    ">
                    <div class="activity-good-type" v-if="prop === 'couponMatchText'">
                        {{ form[prop] }}
                        <ZwSelectedGoods
                            v-if="form.couponMatch != 1"
                            :disabled="true"
                            :customTitle="form.couponMatch == 2 ? '以下商品可用' : '以下商品不可用'"
                            :value="form.goods"></ZwSelectedGoods>
                    </div>
                    <div v-if="prop === 'couponDiscountContent'">
                        <template v-if="form?.couponType == 1">
                            减免<span>{{ form[prop] }}</span
                            >元
                        </template>
                        <template v-else>
                            打<span>{{ form[prop] }}</span
                            >折
                            <div v-if="form.couponDiscountMostChecked" class="mt12 custom-desc-dev">
                                <div class="custom-icon">
                                    <el-icon><Select /></el-icon>
                                </div>
                                最高优惠<span>{{ form.couponDiscountMost }}</span
                                >元
                            </div>
                        </template>
                    </div>
                    <div v-if="prop === 'couponPrerequisites'">
                        <template v-if="form?.couponPrerequisites == 1"> 无门槛 </template>
                        <template v-if="form?.couponPrerequisites == 2">
                            订单商品金额满<span>{{ form.couponPrerequisitesAdditional2 }}</span
                            >元，可用
                            <div v-if="form.couponEveryDecrease == 2" class="mt12 custom-desc-dev">
                                <div class="custom-icon">
                                    <el-icon><Select /></el-icon>
                                </div>
                                每满即减（循环满减）
                            </div>
                        </template>
                        <template v-if="form?.couponPrerequisites == 3">
                            订单商品件数满<span>{{ form.couponPrerequisitesAdditional3 }}</span
                            >件，可用
                        </template>
                    </div>
                    <div v-if="prop === 'couponTimeType'">
                        <template v-if="form.couponTimeType == 1">
                            {{ form.couponTimeAt.join(' 至 ') }}
                        </template>
                        <template v-if="form.couponTimeType != 1">
                            领券后{{ form.couponReceiveTimeTypeVal == 1 ? '当天' : '次日' }}生效，{{
                                form.couponTimeValue
                            }}天内可用
                        </template>
                    </div>
                </template>
                <template v-else>
                    {{ form[prop] }}
                </template>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1">
            <template #title><h1>优惠设置</h1></template>
            <el-descriptions-item
                v-for="{ label, desc, prop } in advancedList"
                :label="label"
                :key="label"
                label-class-name="custom-label">
                <template v-if="['领取次数：', '使用说明：'].includes(label)">
                    <template v-if="label === '领取次数：'">
                        {{
                            form.couponAcquireLimitType == 2
                                ? `每人最多可领${form.couponAcquireLimit}张`
                                : '每人领取次数不限'
                        }}
                    </template>
                    <template v-if="label === '使用说明：'">
                        <div class="word-break">
                            {{ form[prop] }}
                        </div>
                    </template>
                </template>
                <template v-else>
                    <div class="custom-desc-dev">
                        <div class="custom-icon">
                            <el-icon>
                                <Select v-if="form?.[prop] == 2" />
                                <CloseBold v-else
                            /></el-icon>
                        </div>
                        <template v-if="prop == 'couponUsage'">
                            {{ form?.[prop] == 2 ? '' : '未允许' }}
                        </template>
                        <template v-else> {{ form?.[prop] == 2 ? '已' : '未' }} </template>{{ desc }}
                    </div>
                </template>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue';
import request from '@/request/index';
import { useRouter, useRoute } from 'vue-router';
import { cloneDeep } from '@/commons/utils';

const router = useRouter();

const commonList = [
    { name: '', label: '优惠券名称：', desc: '', prop: 'couponName' },
    { name: '', label: '优惠券标题：', desc: '', prop: 'couponTitle' },
    { name: '', label: '发放总量：', desc: '', prop: 'couponTotalText' },
    { name: '', label: '优惠内容：', desc: '', prop: 'couponDiscountContent' },
    { name: '', label: '使用门槛：', desc: '', prop: 'couponPrerequisites' },
    { name: '', label: '用券时间：', desc: '', prop: 'couponTimeType' },
    { name: '', label: '使用商品：', desc: '', prop: 'couponMatchText' }
];

const advancedList = [
    { label: '领取次数：', prop: 'couponAcquireLimitType' },
    {
        label: '公开设置：',
        prop: 'couponPublic',
        desc: '允许公开领取优惠券'
    },
    // { label: '使用设置：', prop: 'couponUsage', desc: '优惠券仅原价购买商品时使用' },
    { label: '使用说明：', prop: 'couponDescription' }
];

const props = defineProps(['info']);

const form = computed(() => {
    const info = cloneDeep(props.info || {});
    const goodTypes = {
        1: '全部商品可用',
        2: '指定商品可用',
        3: '指定商品不可用'
    };
    info.couponTotalText = (info.couponTotal || 0) + '张';
    info.couponMatchText = goodTypes[info?.couponMatch];
    return info;
});

const editHandler = () => {
    const typeNames = {
        1: 'enoughEdit',
        2: 'discountEdit'
    };
    const path = `/marketing/coupon/${typeNames[form?.value?.couponType]}`;
    router.push({
        path,
        query: {
            id: form?.value?.id
        }
    });
};

// const getDetail = async () => {
//     const { data } = await request('fullreduceInfo', { id: props.id });
//     data.activityTime = `${data.activityStartTime} 至 ${data.activityEndTime}`;
//     if (data.activityType == 7) {
//         data.discountSet.orderAmount = data.discountSet.orderAmount / 100;
//         data.discountSet.reduce = data.discountSet.reduce / 100;
//     } else {
//         data.discountSet.reduce = data.discountSet.reduce / 10;
//     }
//     const goodTypes = {
//         1: '全部商品参加 ',
//         2: '指定商品参加',
//         3: '指定商品不参加'
//     };
//     data.activityGoodTypeText = goodTypes[data.activityGoodType];
//     Object.assign(form, data);
// };

onMounted(() => {
    // getDetail();
});
</script>

<style lang="scss">
.sku-table-inline {
    display: inline-block;
    border: 1px solid #eaeaea !important;
    max-width: 90%;
    min-width: 800px;
    tbody tr:first-of-type {
        td:first-of-type {
            border-right: 1px solid #eaeaea;
        }
    }
    .good-preview {
        display: flex;
        align-items: center;
        & > div {
            &:first-of-type {
                margin-right: 8px;
                min-width: 36px;
            }
            &:last-of-type {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
        }
        h5,
        p {
            margin: 0;
        }
        h5 {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
        }
        p {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969696;
        }
    }
}
</style>
<style lang="scss" scoped>
.marketing_group_detail_group {
    position: relative;
    background: #fff;

    :deep .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
        display: flex;
    }

    .mt12 {
        margin-top: 12px;
    }

    h1 {
        font-size: 14px;
        font-weight: 500;
        position: relative;
        padding-left: 15px;
        margin: 0;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 15%;
            width: 3px;
            height: 70%;
            background-color: var(--el-color-primary);
        }
    }
    .edit_group_btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
    }
    .custom-el-desc {
        margin-top: 10px;
        margin-bottom: 40px;
    }
    :deep .custom-label {
        width: 90px;
        text-align: right;
        display: inline-block;
        margin-right: 0px;
        color: #969696;
    }
    :deep {
        .el-descriptions__content {
            color: #33302d;
        }
    }
    .custom-desc-dev {
        display: flex;
        align-items: center;
        line-height: initial;
    }
    .custom-icon {
        width: 14px;
        height: 14px;
        background: #ffeded;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        :deep .el-icon {
            color: #fe292b;
            width: 11px;
        }
    }

    .custom-checkbox {
        margin-top: 10px;
        padding-left: 19px;
    }

    .activity-good-type {
        display: flex;
        align-items: flex-start;
        & > div {
            margin-top: -5px;
        }
    }
    .word-break {
        max-width: 440px;
        word-wrap: break-word;
        white-space: break-spaces;
    }
}
</style>
